<template>
    <el-form :model="form" ref="form" size="small" label-width="120px" label-position="right" class="form-container">
        <div class="content">
            <el-row class="radio">
                <el-radio-group v-model="searchMode">
                    <el-radio :label="0">行名模糊查询</el-radio>
                    <el-radio :label="1">行号精确查询</el-radio>
                </el-radio-group>
            </el-row>
            <el-container>
                <el-row class="main_content" v-if="searchMode == 0">
                    <el-row class="condition">
                        <el-col :span="10" class="parent_block">
                            <el-form-item label="地区：">
                                <FormAddress ref="customerAddressArray" v-model="form.customerAddressArray" :addressFilterSource="addressFilterSource" @input="bankFilter()"></FormAddress>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1" class="parent_block">
                            <el-form-item label="银行名称：">
                                <el-select v-model="form.headBankId" placeholder="请选择">
                                    <el-option
                                    v-for="item in bankList"
                                    :key="item.id"
                                    :label="item.bank_name"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="condition">
                        <el-col :span="10" class="parent_block">
                            <el-form-item label="关键字：">
                                <el-input type="text" v-model="form.keyword" placeholder="如：农业 上海"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1" class="parent_block">
                            <el-form-item label="">
                                <el-button type="info" @click="clear()">清空</el-button>
                                <el-button type="primary" @click="search()">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <Table :tableData='result' :operation="false" @change="changePage" :isIndex="true" @changes="changeSize"/>
                    </el-row>
                </el-row>
                <el-row class="main_content" v-if="searchMode == 1">
                    <el-row class="condition">
                        <el-col :span="10" class="parent_block">
                            <el-form-item label="请输入行号：">
                                <el-input type="number" v-model="bank_number" placeholder="请输入行号" maxlength="12"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" :offset="1" class="parent_block">
                            <el-form-item label="">
                                <el-button type="info" size="small" @click="clearNumber()">清空</el-button>
                                <el-button type="primary" size="small" @click="searchExact()">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <Table :tableData='result' :operation="false" :isIndex="true" @change="changePage" @changes="changeSize"/>
                    </el-row>
                </el-row>
            </el-container>
        </div>
    </el-form>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import Table from '@component/common/HpxTable.vue'
    import FormAddress from '@component/common/FormAddress.vue';
    @Component({
        components:{
            Table,
            FormAddress
        }
    })
    export default class Querybank extends Vue {
    //data
        addressFilterSource: string = 'queryBank';
        searchMode:number = 0  //查询方式 0：模糊查询 1：精确查询
        // provinceList:Array<any> = [] //省的列表
        // cityList:Array<any> = []  //市的列表
        bankList:Array<any> = []  //银行列表
        // addressId = '' //省id
        form = {
            customerAddressId: '',  //地址id
            customerAddressArray: [],
            headBankId: '',  //银行id
            keyword: '' //关键字
        }
        //行号
        bank_number =''
        result = {
            header:[
                {
                    label: '大额行号',
                    key: 'bank_number'
                },
                {
                    label: '银行名称',
                    key: 'bank_name'
                },
                {
                    label: '联系电话',
                    key: 'description'
                }
            ],
            body: [],
            footer: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            }
        }

    //methods
        //获取银行列表
        async getBank () {
            let res = await this.$http.get('banks/bankNext',{},{loading:false})
            if(res.status == 200){
                this.bankList = res.data
            }
        }
        //模糊查询
        async search () {
            this.form.customerAddressId = this.form.customerAddressArray[this.form.customerAddressArray.length - 1];
            let params = {
                bankAddressId: this.form.customerAddressId,
                headBankId: this.form.headBankId,
                keyword: this.form.keyword,
                n: this.result.footer.pageSize,
                p: this.result.footer.currentPage
            }
            let res = await this.$http.get('banks/bank',{ params })
            if(res.status == 200){
                this.result.body = res.data.banks
                this.result.footer.total = res.data.page_info.items_number
                this.result.footer.pageSize = res.data.page_info.items_per_page
            }
        }
        // bankFilter () {
        //     this.search()
        // }
        //精确查询
        async searchExact () {
            if(!this.bank_number){
                this.$alert('请输入行号','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            if(this.bank_number.length != 12){
                this.$alert('行号最多为12位','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let res = await this.$http.get(`banks/bank/getCnapsInfo/${this.bank_number}`,{},{loading:false})
            if(res.status == 200){
                let single_bank = {
                    bank_number: res.data.bank_no,
                    bank_name: res.data.bank_branch_name,
                    description: ''
                }
                this.result.body = []
                this.result.body.push(single_bank)
                this.result.footer.total = 1
            }
            
        }
        //清空
        clear () {
            // this.addressId = '' //省id
            this.$refs.customerAddressArray.init([])
            this.form.customerAddressArray = []
            this.form.headBankId = ''
            this.form.keyword = ''
            // this.search()
            this.result.body = []
            this.result.footer.total = 0
        }

        //精确查询清空
        clearNumber () {
            this.bank_number = ''
            // this.search()
            this.result.body = []
            this.result.footer.total = 0
        }
        //分页回调
        changePage (page:number) {
            this.result.footer.currentPage = page
            this.searchMode == 0 ? this.search() : this.searchExact()
        }
        changeSize (size:number) {
            this.result.footer.pageSize = size
            this.searchMode == 0 ? this.search() : this.searchExact()
        }

        mounted() {
            // this.search()
            this.getBank()
        }
    }

</script>

<style lang="scss" scoped>
    .el-form{
        width: 100%;
    }
    .content{
        width: 1200px;
        margin: 0 auto;
        padding: 60px 0;
        .el-container{
            margin-top: 30px;
        }
        .main_content{
            width: 100%;
        }
    }
    .radio{
        height: 36px;
        line-height: 36px;
    }
    .condition{
        line-height: 50px;
    }
    .el-form-item{
        // margin: 5px 0;
    }
</style>
<style lang="scss">
    .parent_block{
        .el-cascader{
            width: 100%;
        }
        .el-select{
            width: 100%;
        }
        .el-input__inner{
            width: 100%;
            height: 38px;
        }
        .el-button{
            // height: 38px;
            width: 48%;
            margin-right: 4%;
            float: left;
            &:last-child{
                margin: 0;
            }
        }
    }
    .form-container{
        .el-radio__label{
            font-size: 16px;
        }
    }
</style>